
import Vue from "vue";
import app from "./app.vue";
//按需导入mint-ui
// import { Header ,Swipe,SwipeItem,Button,Lazyload} from 'mint-ui';
// import 'mint-ui/lib/style.css';
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name,Swipe)
// Vue.component(SwipeItem.name,SwipeItem)
// Vue.component(Button.name,Button)
// //懒加载
// Vue.use(Lazyload);

//为了懒加载可以生效,完整引入mint-ui
import mintUi from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(mintUi);
//引入mui.css
import "./lib/mui/css/mui.css";
//购物车图标(这里注意引入字体,不然会报错)
import "./lib/mui/css/icons-extra.css"
//引入router路由模块
import VueRouter from "vue-router";
Vue.use(VueRouter);
//引入router.js
import router from "./router.js";
//引入vue-resource
import VueResource from "vue-resource"
Vue.use(VueResource)

// 注册 共享数据管理模块 vuex
import Vuex from "vuex"
Vue.use(Vuex)
//先从本地存贮中获取购物车的信息
var car = JSON.parse(localStorage.getItem("car") || "[]");
const store = new Vuex.Store({
    state: {
        //存放共享数据,使用方法：this.$store.state.***
        carInfo: car//购物车详情信息
    },
    mutations: {
        //相当于methods,组件使用方法：this.$store.commit("方法名称","组件传递的唯一参数")
        addToShopcar(state, goodInfo) {//记住：这里必须将state作为第一个参数
            var flag = false;
            //先判断购物车中是否已存在该商品
            state.carInfo.some(item => {
                if (item.id == goodInfo.id) {
                    //存在只增加商品数量
                    item.count += goodInfo.count;
                    flag = true;
                    return true;//终止循环
                }
            });
            if (!flag) {
                //不存在则直接添加商品信息至购物车
                state.carInfo.push(goodInfo);
            }
            // 将购物车中的信息保存到本地
            localStorage.setItem("car", JSON.stringify(state.carInfo));
        },
        updateGoodsCount(state, updateInfo) {
            state.carInfo.some(item => {
                if (item.id == updateInfo.id) {
                    item.count = parseInt(updateInfo.count);
                    return true;//这句话一定要放在这里，保证数组查找所有数据，直到查找到匹配数据
                }
            })
            //将更新的购物车数据保存到本地
            localStorage.setItem("car", JSON.stringify(state.carInfo))
        },
        delGoods(state, id) {
            //删除本地存放的购物车数据
            state.carInfo.some((el, i) => {
                if (el.id == id) {
                    state.carInfo.splice(i, 1);
                    return true;
                }
            });
            localStorage.setItem("car", JSON.stringify(state.carInfo));
        },
        getSelectedValue(state, infos) {
            state.carInfo.some(el => {
                if (el.id == infos.id) {
                    el.selected = infos.value;
                    return true;
                }
            });
            localStorage.setItem("car", JSON.stringify(state.carInfo));
        }
    },
    getters: {
        //相当于conputed，可以监听state中的值的改变，立即调用：this.$store.getters.***
        getAllCount(state) {
            var counts = 0;
            state.carInfo.forEach(el => {
                counts += el.count;
            });
            return counts;
        },
        //初始化购物车中商品的数量
        getInitCount(state) {
            var obj = {};
            state.carInfo.forEach(el => {
                // 将商品以 {id：count ,}的形式存储起来
                obj[el.id] = el.count;
            })
            return obj;
        },
        getSelectedStatus(state) {
            //将本地state.carInfo中的selected：的值传递给shopcar组件
            var obj = {};
            state.carInfo.forEach(el => {
                obj[el.id] = el.selected;
            })
            return obj;
        },
        getGoodsCountAndAmount(state) {
            //计算购物车勾选商品数量和总价
            var obj = {
                count: 0,//勾选商品的数量
                amount: 0//勾选商品的总价
            }
            state.carInfo.forEach(el => {
                if (el.selected) {
                    //该商品为选中状态
                    obj.count += el.count;
                    obj.amount += el.price * el.count;
                }
            });
            return obj
        }
    }
})
//设置resource的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005/';
//设置post请求的参数
Vue.http.options.emulateJSON = true;
//引入时间格式化插件
import moment from "moment"
//定义全局的时间格式化过滤器
Vue.filter('dateFormat', function (dateStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(dateStr).format(pattern);
})
//引入缩列图插件
//这里需要特别注意：要在webpack.confige.js中定义 .svg 文件的loader
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
var vm = new Vue({
    el: "#app",
    render: function (createElement) {
        return createElement(app);
    },
    router,
    store
});